<template>
  <div>
      <h2>学生姓名：{{name}}</h2>
      <h2>学生年龄：{{age}}</h2>
      <h2>当前求和为：{{number}}</h2>
      <button @click="add">点我number加1</button>
      <button @click="send">点我给App组件发送学生名</button>
      <button @click="unbind">解绑getStName事件</button>
      <button @click="death">销毁当前Student组件的实例</button>
  </div>
</template>

<script>
export default {
    data(){
        return {
            name:'张三',
            age:19,
            number:0
        }
    },
    methods:{
        add(){
            this.number++;
            console.log('add回调触发')
        },
        send(){
            this.$emit('getStName',this.name,1,2,3,4,5)
            // this.$emit('demo')
        },
        unbind(){
            this.$off('getStName') // 解绑一个自定义事件
            
            // this.$off(['getStName','demo']);//解绑多个自定义事件

            // this.$off() //解绑所有自定义事件
        },
        death(){
            // 销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效
            this.$destroy()
        }
    }
}
</script>

<style scoped>
    div{
        border: 3px solid rgb(71, 71, 71);
        box-shadow: 5px 5px 10px black;
        background-color: coral;
    }
    button{
        border: 3px solid rgb(71, 71, 71);
        background-color: seashell;
    }
    button:hover{
        cursor: pointer;
        background-color:lightsteelblue;
    }
</style>